<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>ES6 的学习笔记 | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="学习笔记,ES6," />
  

  
  <meta name="description" content="2011年，ECMAScript 5.1版发布后，就开始制定6.0版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。ES6 的第一个版本在2015年6月发布了，正式名称就是《ECMAScript 2015标准》（简称 ES2015）">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2019-05-26
    </span>
    
      <span>
        | <a href="/blog/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"><i class="fa fa-bookmark"></i>学习笔记</a>
      </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2022-10-8 9:14 
    </span>
  </div>
  <h1 class="passage-title">
    ES6 的学习笔记
  </h1>
  
  <article class="passage-article">
    <p>2011年，ECMAScript 5.1版发布后，就开始制定6.0版了。因此，ES6 这个词的原意，就是指 JavaScript 语言的下一个版本。ES6 的第一个版本在2015年6月发布了，正式名称就是《ECMAScript 2015标准》（简称 ES2015）</p>
<h2 id="ECMAScript6-的定义"><a href="#ECMAScript6-的定义" class="headerlink" title="ECMAScript6 的定义"></a>ECMAScript6 的定义</h2><p>ECMAScript6（简称 ES6） 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。很多时候提到的 ES6 ，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”</p>
<blockquote>
<p>ES6 的第一个版本在2015年6月发布了，正式名称就是《ECMAScript 2015标准》（简称 ES2015）.2016年6月，小幅修订的《ECMAScript 2016标准》（简称 ES2016）如期发布，</p>
</blockquote>
<h2 id="声明变量的命令"><a href="#声明变量的命令" class="headerlink" title="声明变量的命令"></a>声明变量的命令</h2><p>ES6 新增加 let 和 const 俩个声明变量的新命令，和 var 不同的是，两者声明的变量都不存在<code>声明提前</code>的现象。因此带来了<code>暂时性死区</code>的现象（既在声明前使用 let 和 const 声明的变量会导致报错），同时两者不允许重复声明同一个变量。两者不同的是，let 声明一个变量，const 则声明一个指针不变的变量。对于简单类型（数值、字符串、布尔值），既值不变，对于复杂类型，则保证指向的内存地址不变，数据结构不能保证不变，如要保证数据不变需要使用冻结方法 <strong>Object.freeze（</strong>）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(str)  <span class="comment">//str is not defined</span></span><br><span class="line"><span class="keyword">let</span> str = <span class="string">&#x27;字符串&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr = []</span><br><span class="line">arr.<span class="title function_">push</span>(<span class="string">&#x27;22&#x27;</span>)</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr)  <span class="comment">// [&quot;22&quot;]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> arr2 = <span class="title class_">Object</span>.<span class="title function_">freeze</span>([<span class="number">11</span>])</span><br><span class="line">arr2.<span class="title function_">push</span>(<span class="string">&#x27;22&#x27;</span>)     <span class="comment">//object is not extensible</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr2)  <span class="comment">// [11]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> num = <span class="number">2</span></span><br><span class="line">num = <span class="number">3</span>  <span class="comment">//Assignment to constant variable</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>块级作用域和函数声明</p>
</blockquote>
<p>新的声明方式带来了块级作用域的出现，ES6 允许块级作用域的任意嵌套，同时块级作用域使得获得广泛应用的立即执行函数表达式（IIFE）不在必要；<br>ES5 规定，<strong>函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明</strong>（但是由于厂商为了兼容以前的旧代码，浏览器没有遵守ES5的之前的规定，还是支持在块级作用域之中声明函数）；<br>ES6 则<strong>允许函数在块级作用域中声明</strong>（但是 ES6 在附录 B里面规定，浏览器的实现可以不遵守这个规定，有自己的行为方式）：</p>
<ul>
<li>允许在块级作用域内声明函数。</li>
<li>函数声明类似于var，即会提升到全局作用域或函数作用域的头部。</li>
<li>同时，函数声明还会提升到所在的块级作用域的头部</li>
</ul>
<p>所以考虑到环境导致的行为差异太大，<strong>应该避免在块级作用域内声明函数</strong>。如果确实需要，也应该写成函数表达式，而不是函数声明语句</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 块级作用域内部，优先使用函数表达式</span></span><br><span class="line">&#123;</span><br><span class="line">  <span class="keyword">let</span> a = <span class="string">&#x27;secret&#x27;</span>;</span><br><span class="line">  <span class="keyword">let</span> f = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> a;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>注意</strong>：</p>
<ul>
<li>ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域</li>
<li>ES5 只有两种声明变量的方法：var命令和function命令。ES6<br>除了添加let和const命令，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。</li>
</ul>
<h2 id="变量的结构赋值"><a href="#变量的结构赋值" class="headerlink" title="变量的结构赋值"></a>变量的结构赋值</h2><p>ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，从数组中提取值，按照对应位置，对变量赋值本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined</p>
<blockquote>
<p>以数组的形式</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [x,[y],z] = [<span class="number">1</span>,[<span class="number">2</span>],<span class="number">3</span>] <span class="comment">// x = 1,y = 2,z = 3</span></span><br><span class="line"><span class="keyword">let</span> [x, , y] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]  <span class="comment">// x = 1,y = 3</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//不完全解构 </span></span><br><span class="line"><span class="keyword">let</span> [a,b,c] = [<span class="number">1</span>,<span class="number">2</span>]; <span class="comment">// a = 1,b = 2,c = undefinef</span></span><br><span class="line"><span class="keyword">let</span> [a,b] = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]; <span class="comment">// a = 1,b = 2</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//默认值: 只有当特定数组成员严格等于undefined，默认值才会生效</span></span><br><span class="line"><span class="keyword">let</span> [x, y = <span class="string">&#x27;b&#x27;</span>] = [<span class="string">&#x27;a&#x27;</span>, <span class="literal">undefined</span>]; <span class="comment">// x=&#x27;a&#x27;, y=&#x27;b&#x27;</span></span><br><span class="line"><span class="keyword">let</span> [x, y = <span class="string">&#x27;b&#x27;</span>,z = <span class="string">&#x27;c&#x27;</span>] = [<span class="string">&#x27;a&#x27;</span>,<span class="literal">null</span>] <span class="comment">// x=&#x27;a&#x27;, y=null,z=&#x27;c&#x27;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>以对象的形式</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> &#123; x, y, z &#125; = &#123; <span class="attr">y</span>: <span class="string">&#x27;a&#x27;</span>, <span class="attr">z</span>: <span class="string">&#x27;b&#x27;</span> &#125; <span class="comment">// x=undefined y=&#x27;a&#x27; z=&#x27;b&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 变量和属性名不一致; 对象属性匹配的是模式，后面的才是匹配数据的变量</span></span><br><span class="line"><span class="keyword">let</span> &#123; <span class="attr">foo</span>: x &#125; = &#123; <span class="attr">foo</span>: <span class="string">&#x27;a&#x27;</span>, <span class="attr">bar</span>: <span class="string">&#x27;b&#x27;</span> &#125; <span class="comment">// x=&#x27;a&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//默认值</span></span><br><span class="line"><span class="keyword">let</span> &#123;x, y = <span class="number">5</span>&#125; = &#123;<span class="attr">x</span>: <span class="number">1</span>&#125;; <span class="comment">// x=1 y=5</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// JavaScript 引擎会将&#123;x&#125;理解成一个代码块，从而发生语法错误,需要使用圆括号进行包裹</span></span><br><span class="line"><span class="keyword">let</span> x;</span><br><span class="line">&#123;x&#125; = &#123;<span class="attr">x</span>: <span class="number">1</span>&#125;; <span class="comment">// Unexpected token =</span></span><br><span class="line">(&#123;x&#125; = &#123;<span class="attr">x</span>: <span class="number">1</span>&#125;); <span class="comment">// x=1</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>以字符串，数字或布尔值的形式</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> [a, b, c] = <span class="string">&#x27;her&#x27;</span>; <span class="comment">//a=&#x27;h&#x27; b=&#x27;e&#x27; c=&#x27;r&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">toString</span>: s&#125; = <span class="number">123</span>;</span><br><span class="line">s === <span class="title class_">Number</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span> <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> &#123;<span class="attr">toString</span>: s&#125; = <span class="literal">true</span>;</span><br><span class="line">s === <span class="title class_">Boolean</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span> <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<h2 id="数组的扩展运算"><a href="#数组的扩展运算" class="headerlink" title="数组的扩展运算"></a>数组的扩展运算</h2><h3 id="扩展运算符-…"><a href="#扩展运算符-…" class="headerlink" title="扩展运算符 …"></a>扩展运算符 <strong>…</strong></h3><p>扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。扩展运算符后面还可以放置表达式，只要是数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(...[<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]) <span class="comment">// 1 2 3</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(...(<span class="number">5</span> &gt; <span class="number">0</span> ? [<span class="string">&#x27;a&#x27;</span>] : []))</span><br><span class="line"></span><br><span class="line"><span class="comment">//  取代 applay</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="property">max</span>.<span class="title function_">apply</span>(<span class="literal">null</span>, [<span class="number">14</span>, <span class="number">3</span>, <span class="number">77</span>]) <span class="comment">// 获取数组中最大值</span></span><br><span class="line"><span class="title class_">Math</span>.<span class="title function_">max</span>(...[<span class="number">14</span>, <span class="number">3</span>, <span class="number">77</span>]) <span class="comment">// 效果同上</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> arr1 = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line"><span class="keyword">var</span> arr2 = [<span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</span><br><span class="line"><span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">push</span>.<span class="title function_">apply</span>(arr1, arr2); <span class="comment">// 将数组合并</span></span><br><span class="line">arr1.<span class="title function_">push</span>(...arr2); <span class="comment">//效果同上,arr1会改变 和cancat()比较，避免了内存浪费，当然如果还需要使用arr1就另说</span></span><br></pre></td></tr></table></figure>

<p><strong>注意</strong></p>
<ul>
<li>只有函数调用时，扩展运算符才可以放在圆括号中，否则会报错</li>
</ul>
<h3 id="数组的扩展"><a href="#数组的扩展" class="headerlink" title="数组的扩展"></a>数组的扩展</h3><p><strong>Array.from</strong> 方法用于将类数组对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arrayLike = &#123;</span><br><span class="line">    <span class="string">&#x27;0&#x27;</span>: <span class="string">&#x27;a&#x27;</span>,</span><br><span class="line">    <span class="string">&#x27;1&#x27;</span>: <span class="string">&#x27;b&#x27;</span>,</span><br><span class="line">    <span class="attr">length</span>: <span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> arr2 = <span class="title class_">Array</span>.<span class="title function_">from</span>(arrayLike); <span class="comment">// [&#x27;a&#x27;, &#x27;b&#x27;]</span></span><br></pre></td></tr></table></figure>

<p><strong>Array.of</strong> 方法用于将一组值，转换为数组。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Array</span>.<span class="title function_">of</span>(<span class="number">3</span>, <span class="number">11</span>, <span class="number">8</span>) <span class="comment">// [3,11,8]</span></span><br></pre></td></tr></table></figure>

<p><strong>Array.fill()</strong> 方法用于填充数组</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">[<span class="string">&#x27;a&#x27;</span>, <span class="string">&#x27;b&#x27;</span>, <span class="string">&#x27;c&#x27;</span>].<span class="title function_">fill</span>(<span class="number">7</span>)</span><br><span class="line"><span class="comment">// [7, 7, 7]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Array</span>(<span class="number">3</span>).<span class="title function_">fill</span>(<span class="number">7</span>)</span><br><span class="line"><span class="comment">// [7, 7, 7]</span></span><br></pre></td></tr></table></figure>

<h2 id="对象的扩展运算"><a href="#对象的扩展运算" class="headerlink" title="对象的扩展运算"></a>对象的扩展运算</h2><p>ES6 允许直接写入变量和函数，作为对象的属性和方法。变量名为属性名, 变量的值为属性值。函数则通过return 一个对象的方法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> foo = <span class="string">&#x27;bar&#x27;</span>;</span><br><span class="line"><span class="keyword">const</span> baz = &#123;foo&#125;;</span><br><span class="line">baz <span class="comment">// &#123;foo: &quot;bar&quot;&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">f</span>(<span class="params">x, y</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;x, y&#125;;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">f</span>(<span class="number">1</span>, <span class="number">2</span>) <span class="comment">// Object &#123;x: 1, y: 2&#125;</span></span><br></pre></td></tr></table></figure>

<h3 id="对象的扩展"><a href="#对象的扩展" class="headerlink" title="对象的扩展"></a>对象的扩展</h3><p><strong>Object.is()</strong> 用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">+<span class="number">0</span> === -<span class="number">0</span> <span class="comment">//true</span></span><br><span class="line"><span class="title class_">NaN</span> === <span class="title class_">NaN</span> <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">is</span>(+<span class="number">0</span>, -<span class="number">0</span>) <span class="comment">// false</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">is</span>(<span class="title class_">NaN</span>, <span class="title class_">NaN</span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<p><strong>Object.assign()</strong> 用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）:如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性,如果参数不是对象，则会先转成对象，然后返回</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> target = &#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">1</span> &#125;;</span><br><span class="line"><span class="keyword">const</span> source1 = &#123; <span class="attr">b</span>: <span class="number">2</span>, <span class="attr">c</span>: <span class="number">2</span> &#125;;</span><br><span class="line"><span class="keyword">const</span> source2 = &#123; <span class="attr">c</span>: <span class="number">3</span> &#125;;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">assign</span>(target, source1, source2);</span><br><span class="line">target <span class="comment">// &#123;a:1, b:2, c:3&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//拷贝对象</span></span><br><span class="line"><span class="keyword">const</span> obj1 = &#123;<span class="attr">a</span>: &#123;<span class="attr">b</span>: <span class="number">1</span>&#125;&#125;;</span><br><span class="line"><span class="keyword">const</span> obj2 = <span class="title class_">Object</span>.<span class="title function_">assign</span>(&#123;&#125;, obj1);</span><br><span class="line">obj1.<span class="property">a</span>.<span class="property">b</span> = <span class="number">2</span>;</span><br><span class="line">obj2.<span class="property">a</span>.<span class="property">b</span> <span class="comment">// 2</span></span><br><span class="line"><span class="comment">//Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用</span></span><br></pre></td></tr></table></figure>

<h3 id="prototype"><a href="#prototype" class="headerlink" title="prototype"></a>prototype</h3><p>JavaScript 语言的对象继承是通过原型链实现的。ES6 提供了更多原型对象的操作方法，<code>__proto__</code>属性（前后各两个下划线），用来读取或设置当前对象的prototype对象。目前，所有浏览器（包括 IE11）都部署了这个属性。标准明确规定，<strong>只有浏览器必须部署这个属性，其他运行环境不一定需要部署，而且新的代码最好认为这个属性是不存在的</strong></p>
<p><strong>Object.setPrototypeOf()</strong> 作用与__proto__相同，用来设置一个对象的prototype对象，返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 格式</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">setPrototypeOf</span>(object, prototype)</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> proto = &#123;&#125;;</span><br><span class="line"><span class="keyword">let</span> obj = &#123; <span class="attr">x</span>: <span class="number">10</span> &#125;;</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">setPrototypeOf</span>(obj, proto);</span><br><span class="line">proto.<span class="property">y</span> = <span class="number">20</span>; <span class="comment">// 设置原型属性</span></span><br><span class="line">obj.<span class="property">x</span> <span class="comment">// 10</span></span><br><span class="line">obj.<span class="property">y</span> <span class="comment">// 20</span></span><br></pre></td></tr></table></figure>

<p><strong>Object.getPrototypeOf()</strong> 该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//格式</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(object);</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">Rectangle</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// ...</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">const</span> rec = <span class="keyword">new</span> <span class="title class_">Rectangle</span>();</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(rec) === <span class="title class_">Rectangle</span>.<span class="property"><span class="keyword">prototype</span></span></span><br><span class="line"><span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">setPrototypeOf</span>(rec, <span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>);</span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">getPrototypeOf</span>(rec) === <span class="title class_">Rectangle</span>.<span class="property"><span class="keyword">prototype</span></span></span><br><span class="line"><span class="comment">// false</span></span><br></pre></td></tr></table></figure>

<h2 id="独一无二的Symbol"><a href="#独一无二的Symbol" class="headerlink" title="独一无二的Symbol"></a>独一无二的Symbol</h2><p>在ES6之前 Javascr 有五种基本原始数据类型：string，number，boolean，Null，undefined，和 复杂数据类型 object。现在ES6 新增加一种原始数据类型：<strong>Symbol，它表示独一无二的值</strong>。Symbol 值通过Symbol函数生成。且不能与其他类型的值进行混合运算</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> s1 = <span class="title class_">Symbol</span>(<span class="string">&#x27;foo&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> s2 = <span class="title class_">Symbol</span>(<span class="string">&#x27;foo&#x27;</span>);</span><br><span class="line">s1 === s2 <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Symbol 值作为对象属性名时，不能用点运算符</span></span><br><span class="line"><span class="keyword">let</span> a=<span class="title class_">Symbol</span>()</span><br><span class="line"><span class="keyword">let</span> b=&#123;</span><br><span class="line">    [a]:<span class="string">&#x27;c&#x27;</span>,</span><br><span class="line">  <span class="attr">a</span>:<span class="string">&#x27;d&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line">b.<span class="property">a</span> <span class="comment">// &#x27;d&#x27;</span></span><br><span class="line">b[a] <span class="comment">// &#x27;c&#x27;</span></span><br><span class="line">b[<span class="string">&#x27;a&#x27;</span>] <span class="comment">// &#x27;d&#x27;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意</strong></p>
<ul>
<li><code>Symbol</code> 作为属性名，该属性不会出现在<code>for...in</code>、<code>for...of</code>循环中，也不会被<code>Object.keys()</code>、<code>Object.getOwnPropertyNames()</code>、<code>JSON.stringify()</code>返回.但是，它也不是私有属性，有一个<code>Object.getOwnPropertySymbols</code>方法，可以获取指定对象的所有 Symbol 属性名</li>
</ul>
<h3 id="Symbol的扩展运用"><a href="#Symbol的扩展运用" class="headerlink" title="Symbol的扩展运用"></a>Symbol的扩展运用</h3><p><strong>Symbol.for()</strong> 接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建并返回一个以该字符串为名称的 Symbol 值.和Symbol() 不同的是，你调用Symbol（）多少次，它就创建多少个不同的Symbol，而Symbol.for（）则没有才创建，否则返回</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> s1 = <span class="title class_">Symbol</span>.<span class="title function_">for</span>(<span class="string">&#x27;foo&#x27;</span>);</span><br><span class="line"><span class="keyword">let</span> s2 = <span class="title class_">Symbol</span>.<span class="title function_">for</span>(<span class="string">&#x27;foo&#x27;</span>);</span><br><span class="line"></span><br><span class="line">s1 === s2 <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<p><strong>Symbol.keyFor()</strong> 方法返回一个已登记的 Symbol 类型值的key</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> s1 = <span class="title class_">Symbol</span>.<span class="title function_">for</span>(<span class="string">&quot;foo&quot;</span>);</span><br><span class="line"><span class="title class_">Symbol</span>.<span class="title function_">keyFor</span>(s1) <span class="comment">// &quot;foo&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//Symbol()写法没有登记机制，所以每次调用都会返回一个不同的值</span></span><br><span class="line"><span class="keyword">let</span> s2 = <span class="title class_">Symbol</span>(<span class="string">&quot;foo&quot;</span>);</span><br><span class="line"><span class="title class_">Symbol</span>.<span class="title function_">keyFor</span>(s2) <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>

<h2 id="Set和-Map数据结构"><a href="#Set和-Map数据结构" class="headerlink" title="Set和 Map数据结构"></a>Set和 Map数据结构</h2><h3 id="Set-数据结构"><a href="#Set-数据结构" class="headerlink" title="Set 数据结构"></a>Set 数据结构</h3><p>Set 数据结构类似数组，但是它的成员的值都是唯一，没有重复的值，<code>Set</code> 本身就是一个构造函数，用于生存Set 数据结构</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> s = <span class="keyword">new</span> <span class="title class_">Set</span>();</span><br><span class="line">[<span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">2</span>, <span class="number">2</span>].<span class="title function_">forEach</span>(<span class="function"><span class="params">x</span> =&gt;</span> s.<span class="title function_">add</span>(x));</span><br><span class="line">s <span class="comment">// [2,3,5]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Set 由内部算法进行判断成员值是否相等，类似“===”（全等），区别在于：在Set中 NaN等于NaN；“===”（全等）则否认他们相等</span></span><br><span class="line"></span><br><span class="line">[...<span class="keyword">new</span> <span class="title class_">Set</span>(array)] <span class="comment">// 可用于去除数组的重复</span></span><br><span class="line">[...<span class="keyword">new</span> <span class="title class_">Set</span>(<span class="string">&#x27;ababbc&#x27;</span>)].<span class="title function_">join</span>(<span class="string">&#x27;&#x27;</span>) <span class="comment">// 可用于去除字符串的重复</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<blockquote>
<p>Set 结构的实例有以下属性。</p>
</blockquote>
<ul>
<li><code>Set.prototype.constructor</code>：构造函数，默认就是Set函数。</li>
<li><code>Set.prototype.size</code>：返回Set实例的成员总数。</li>
</ul>
<blockquote>
<p>Set 实例的操作方法（用于操作数据）</p>
</blockquote>
<ul>
<li><code>add(value</code>)：添加某个值，返回 <code>Set</code> 结构本身。</li>
<li><code>delete(value)</code>：删除某个值，返回一个布尔值，表示删除是否成功。</li>
<li><code>has(value)</code>：返回一个布尔值，表示该值是否为Set的成员。</li>
<li><code>clear()</code>：清除所有成员，没有返回值。</li>
</ul>
<blockquote>
<p>Set 实例的遍历方法（用于遍历成员。）。</p>
</blockquote>
<ul>
<li><code>keys()</code>：返回键名的遍历器 </li>
<li><code>values()</code>：返回键值的遍历器 </li>
<li><code>entries()</code>：返回键值对的遍历器</li>
<li><code>forEach()</code>：使用回调函数遍历每个成员</li>
</ul>
<h3 id="Map-数据结构"><a href="#Map-数据结构" class="headerlink" title="Map 数据结构"></a>Map 数据结构</h3><p>Map 类似于对象，也是键值对的集合，但是<code>键</code>的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，也许 Map 比 Object 更合适</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> map = <span class="keyword">new</span> <span class="title class_">Map</span>([</span><br><span class="line">  [<span class="string">&#x27;name&#x27;</span>, <span class="string">&#x27;张三&#x27;</span>],</span><br><span class="line">  [<span class="string">&#x27;title&#x27;</span>, <span class="string">&#x27;Author&#x27;</span>]</span><br><span class="line">]);</span><br><span class="line"></span><br><span class="line">map.<span class="property">size</span> <span class="comment">// 2</span></span><br><span class="line">map.<span class="title function_">has</span>(<span class="string">&#x27;name&#x27;</span>) <span class="comment">// true</span></span><br><span class="line">map.<span class="title function_">get</span>(<span class="string">&#x27;name&#x27;</span>) <span class="comment">// &quot;张三&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> o = &#123;<span class="attr">p</span>: <span class="string">&#x27;Hello World&#x27;</span>&#125;;</span><br><span class="line">map.<span class="title function_">set</span>(o, <span class="string">&#x27;content&#x27;</span>) <span class="comment">// 以对象o作为健名</span></span><br><span class="line">map.<span class="title function_">get</span>(o) <span class="comment">// &quot;content&quot;</span></span><br><span class="line">map.<span class="title function_">has</span>(o) <span class="comment">// true</span></span><br><span class="line">map.<span class="title function_">delete</span>(o) <span class="comment">// true</span></span><br><span class="line">map.<span class="title function_">has</span>(o) <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//只有对同一个对象的引用，Map 结构才将其视为同一个键</span></span><br><span class="line">map.<span class="title function_">set</span>([<span class="string">&#x27;a&#x27;</span>], <span class="number">555</span>);</span><br><span class="line">map.<span class="title function_">get</span>([<span class="string">&#x27;a&#x27;</span>]) <span class="comment">// undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// Map 转数组</span></span><br><span class="line">[...map] </span><br></pre></td></tr></table></figure>

<blockquote>
<p>Map 数据结构的操作方法 （用于操作数据）</p>
</blockquote>
<ul>
<li><code>set()</code> 设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键</li>
<li><code>get()</code> 读取key对应的键值，如果找不到key，返回undefined</li>
<li><code>has()</code> 返回一个布尔值，表示某个键是否在当前 Map 对象之中</li>
<li><code>delete()</code> 删除某个键，返回true。如果删除失败，返回false</li>
<li><code>clear()</code> 清除所有成员，没有返回值</li>
</ul>
<blockquote>
<p>Map 数据结构的遍历方法（用于遍历成员。）</p>
</blockquote>
<ul>
<li><code>keys()</code>：返回键名的遍历器。 </li>
<li><code>values()</code>：返回键值的遍历器。</li>
<li><code>entries()</code>：返回所有成员的遍历器。</li>
<li><code>forEach()</code>：遍历 Map 的所有成员。</li>
</ul>
<h2 id="数据结构的遍历循环"><a href="#数据结构的遍历循环" class="headerlink" title="数据结构的遍历循环"></a>数据结构的遍历循环</h2><p>Javascript中，数据集合在新增了 Set 和 Map 后，目前有四种，Array， Object，Set，和 Map.而JS 可以通过遍历机制对数据集合进行遍历操作（即依次处理该数据结构的所有成员）。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title class_">Arr</span> = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>;i&lt;<span class="title class_">Arr</span>.<span class="property">length</span>;i++)&#123; <span class="comment">//for 循环</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Arr</span>[i])</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">in</span> <span class="title class_">Arr</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Arr</span>[i])</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">of</span> <span class="title class_">Arr</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(i)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//如果是数组，三者目前效果都是 1 2 3 。当然forEach will 和do/will 也可以用于遍历</span></span><br></pre></td></tr></table></figure>

<h2 id="异步编程相关Promise"><a href="#异步编程相关Promise" class="headerlink" title="异步编程相关Promise"></a>异步编程相关Promise</h2><p>Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象,Promise对象存在三种状态：<code>pending</code>（进行中）、<code>fulfilled</code>（已成功）<code>和rejected</code>（已失败）。只有异步操作可以改变状态，且改变后无法修改</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> promise = <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>)</span><br><span class="line">  <span class="keyword">if</span>(<span class="literal">true</span>)&#123; <span class="comment">// 可以通过条件判断执行不同的状态或只执行成功</span></span><br><span class="line">    <span class="title function_">resolve</span>(<span class="string">&#x27;成功&#x27;</span>)</span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="title function_">reject</span>(<span class="string">&#x27;失败&#x27;</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">promise.<span class="title function_">then</span>(<span class="keyword">function</span>(<span class="params">value</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(value) <span class="comment">// 成功后的回调</span></span><br><span class="line">&#125;, <span class="keyword">function</span>(<span class="params">error</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(error) <span class="comment">// 失败后的回调</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 图片加载异步执行函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">loadImageAsync</span>(<span class="params">url</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="keyword">function</span>(<span class="params">resolve, reject</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> image = <span class="keyword">new</span> <span class="title class_">Image</span>();</span><br><span class="line">    image.<span class="property">src</span> = url;</span><br><span class="line">    image.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(url + <span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>())</span><br><span class="line">      <span class="title function_">resolve</span>(image);</span><br><span class="line">    &#125;;</span><br><span class="line">    image.<span class="property">onerror</span> = <span class="keyword">function</span>(<span class="params"></span>) &#123;</span><br><span class="line">      <span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(<span class="string">&#x27;Could not load image at &#x27;</span> + url));</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>例子的执行顺序为：1 ，2 ，成功。因为异步回调只有在所有同步任务执行完才会执行。<code>resolve</code> 状态必须是要有。<code>reject</code> 状态可选</p>
<h3 id="Promise-的数据处理"><a href="#Promise-的数据处理" class="headerlink" title="Promise 的数据处理"></a>Promise 的数据处理</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">promise</span><br><span class="line">.<span class="title function_">then</span>(<span class="function">(<span class="params">resolve</span>)=&gt;</span>&#123; </span><br><span class="line">    <span class="comment">// 执行状态成功的回调</span></span><br><span class="line">&#125;,<span class="function">(<span class="params">reject</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="comment">// 执行状态失败的回调(包括代码出错)</span></span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">catch</span>(<span class="function">(<span class="params">err</span>)=&gt;</span>&#123; <span class="comment">// 和then 第二个参数对比，建议使用 catch 捕获</span></span><br><span class="line">    <span class="comment">// 执行状态失败的回调(包括代码出错)</span></span><br><span class="line">&#125;)</span><br><span class="line">.<span class="title function_">finally</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 无论怎样都会执行的回调</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="异步编程相关Generator"><a href="#异步编程相关Generator" class="headerlink" title="异步编程相关Generator"></a>异步编程相关Generator</h2><p>Generator 函数是 ES6 提供的一种异步编程解决方案，Generator 有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式. Generator 函数和普通函数最大区别在于它是分段执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* <span class="title function_">generator</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;hello&#x27;</span></span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;word&#x27;</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;end&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> gen=<span class="title function_">generator</span>()</span><br><span class="line">gen.<span class="title function_">next</span>() <span class="comment">// &#123; value: &#x27;hello&#x27;, done: false &#125;</span></span><br><span class="line">gen.<span class="title function_">next</span>() <span class="comment">// &#123; value: &#x27;word&#x27;, done: false &#125;</span></span><br><span class="line">gen.<span class="title function_">next</span>() <span class="comment">// &#123; value: &#x27;end&#x27;, done: true &#125;</span></span><br><span class="line">gen.<span class="title function_">next</span>() <span class="comment">// &#123; value: &#x27;end&#x27;, done: true &#125;</span></span><br></pre></td></tr></table></figure>

<p>Generator 函数分段执行，yield表达式是切割分段的标记，通过<code>next()</code> 调用，除此外 <code>for...of...</code> 可以遍历Generator 函数且不需要<code>next()</code></p>
<h3 id="Generator-数据操作"><a href="#Generator-数据操作" class="headerlink" title="Generator 数据操作"></a>Generator 数据操作</h3><blockquote>
<p>Generator.prototype.throw()</p>
</blockquote>
<p>在函数体外抛出错误，然后在 Generator 函数体内捕获</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> g = <span class="keyword">function</span>* () &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;one&#x27;</span>;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">2</span>)</span><br><span class="line">    <span class="keyword">yield</span> <span class="string">&#x27;two&#x27;</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;three&#x27;</span></span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;内部捕获&#x27;</span>, e);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> i = <span class="title function_">g</span>();</span><br><span class="line">i.<span class="title function_">next</span>();</span><br><span class="line"></span><br><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">  i.<span class="keyword">throw</span>(<span class="string">&#x27;a&#x27;</span>);</span><br><span class="line">  i.<span class="keyword">throw</span>(<span class="string">&#x27;b&#x27;</span>);</span><br><span class="line">&#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;外部捕获&#x27;</span>, e);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>Generator.prototype.return()</p>
</blockquote>
<p>返回给定的值，并且终结遍历 Generator 函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span>* <span class="title function_">gen</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">yield</span> <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">yield</span> <span class="number">2</span>;</span><br><span class="line">  <span class="keyword">yield</span> <span class="number">3</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> g = <span class="title function_">gen</span>();</span><br><span class="line"></span><br><span class="line">g.<span class="title function_">next</span>()        <span class="comment">// &#123; value: 1, done: false &#125;</span></span><br><span class="line">g.<span class="keyword">return</span>(<span class="string">&#x27;foo&#x27;</span>) <span class="comment">// &#123; value: &quot;foo&quot;, done: true &#125;</span></span><br><span class="line">g.<span class="title function_">next</span>()        <span class="comment">// &#123; value: undefined, done: true &#125;</span></span><br></pre></td></tr></table></figure>

<h2 id="异步编程相关-async"><a href="#异步编程相关-async" class="headerlink" title="异步编程相关 async"></a>异步编程相关 async</h2><p>async 函数返回一个 Promise 对象，可以使用<code>then</code>方法添加回调函数。当函数执行的时候，一旦遇到<code>await</code>就会先返回，等到异步操作完成，再接着执行函数体内后面的语句</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">timeout</span>(<span class="params">ms</span>) &#123;</span><br><span class="line">  <span class="keyword">await</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(resolve, ms);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">asyncPrint</span>(<span class="params">value, ms</span>) &#123;</span><br><span class="line">  <span class="keyword">await</span> <span class="title function_">timeout</span>(ms);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(value);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">asyncPrint</span>(<span class="string">&#x27;hello world&#x27;</span>, <span class="number">50</span>);<span class="comment">// 50毫秒后，打印hello word</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 函数声明式</span></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="comment">// 函数表达式</span></span><br><span class="line"><span class="keyword">const</span> foo = <span class="keyword">async</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125;;</span><br><span class="line"><span class="comment">// 箭头函数</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">foo</span> = <span class="keyword">async</span> (<span class="params"></span>) =&gt; &#123;&#125;;</span><br><span class="line"><span class="comment">// 对象的方法</span></span><br><span class="line"><span class="keyword">let</span> obj = &#123; <span class="keyword">async</span> <span class="title function_">foo</span>(<span class="params"></span>) &#123;&#125; &#125;;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h3 id="async-的数据处理"><a href="#async-的数据处理" class="headerlink" title="async 的数据处理"></a>async 的数据处理</h3><p>async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误,任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">await</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(<span class="string">&#x27;出错了&#x27;</span>);</span><br><span class="line">  <span class="keyword">await</span> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>(<span class="string">&#x27;hello world&#x27;</span>); <span class="comment">// 不会执行</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">f</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="keyword">await</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(<span class="string">&#x27;出错了&#x27;</span>);</span><br><span class="line">  &#125; <span class="keyword">catch</span>(e) &#123;</span><br><span class="line">    ···</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">await</span> <span class="title class_">Promise</span>.<span class="title function_">resolve</span>(<span class="string">&#x27;hello world&#x27;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="Class-的基本语法"><a href="#Class-的基本语法" class="headerlink" title="Class 的基本语法"></a>Class 的基本语法</h2><p>ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。Class里的方法不可枚举</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Bar</span> &#123;</span><br><span class="line">  <span class="title function_">hello</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hello word&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">string</span>(<span class="params">name</span>)&#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="property">name</span>=name</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 表达式的形式</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">Bar</span> = <span class="keyword">class</span> <span class="title class_">Me</span> &#123;</span><br><span class="line">  <span class="title function_">getClassName</span>(<span class="params"></span>) &#123; <span class="comment">// 只能在类内部使用Me名称。外界new 需要使用 Bar</span></span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Me</span>.<span class="property">name</span>; </span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">new</span> <span class="title class_">Bar</span>();</span><br><span class="line">b.<span class="title function_">hello</span>() <span class="comment">// &quot;hello word&quot;</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>constructor 类的默认方法</p>
</blockquote>
<p>通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Point</span> &#123; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 等同于</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Point</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>get 和 set ：拦截和存储</p>
</blockquote>
<p>在<code>类</code>的内部可以使用<code>get</code>和<code>set</code>关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">MyClass</span> &#123;</span><br><span class="line">  <span class="title function_">constructor</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">get</span> <span class="title function_">prop</span>() &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;getter&#x27;</span>; <span class="comment">// 在读取 prop 属性的时候，返回</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">set</span> <span class="title function_">prop</span>(<span class="params">value</span>) &#123;  <span class="comment">// 在设置 prop 属性的时候，打印</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;setter: &#x27;</span>+value);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> inst = <span class="keyword">new</span> <span class="title class_">MyClass</span>();</span><br><span class="line">inst.<span class="property">prop</span> = <span class="number">123</span>;  <span class="comment">// setter: 123</span></span><br><span class="line">inst.<span class="property">prop</span>  <span class="comment">// &#x27;getter&#x27;</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li><strong>类必须使用new调用，否则会报错</strong></li>
</ul>
<h3 id="不被继承的静态方法"><a href="#不被继承的静态方法" class="headerlink" title="不被继承的静态方法"></a>不被继承的静态方法</h3><p>所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上<code>static</code>关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">class</span> <span class="title class_">Foo</span> &#123;</span><br><span class="line">  <span class="keyword">static</span> <span class="title function_">classMethod</span>(<span class="params"></span>) &#123; <span class="comment">// 静态方法</span></span><br><span class="line">    <span class="keyword">return</span> <span class="string">&#x27;hello&#x27;</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 类可以直接调用</span></span><br><span class="line"><span class="title class_">Foo</span>.<span class="title function_">classMethod</span>() <span class="comment">// &#x27;hello&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> foo = <span class="keyword">new</span> <span class="title class_">Foo</span>();</span><br><span class="line">foo.<span class="title function_">classMethod</span>() </span><br><span class="line"><span class="comment">// TypeError: foo.classMethod is not a function</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果静态方法包含this关键字，这个this指的是类，而不是实例</span></span><br><span class="line"><span class="keyword">class</span> <span class="title class_">Foo</span> &#123;</span><br><span class="line">  <span class="keyword">static</span> <span class="title function_">bar</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">baz</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">static</span> <span class="title function_">baz</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;hello&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">baz</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;world&#x27;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="title class_">Foo</span>.<span class="title function_">bar</span>() <span class="comment">// hello</span></span><br></pre></td></tr></table></figure>

<h2 id="模块体系的加载"><a href="#模块体系的加载" class="headerlink" title="模块体系的加载"></a>模块体系的加载</h2><p>ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入.export命令除了输出变量，还可以输出函数或类（class）,import的加载方式都是编译时加载,所以不可以有算术表达式</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//整体加载</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> <span class="title class_">React</span> <span class="keyword">from</span> <span class="string">&#x27;react&#x27;</span></span><br><span class="line"><span class="comment">// 用星号（*）指定一个对象，所有输出值都加载在这个对象上面</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//静态加载</span></span><br><span class="line"><span class="keyword">import</span> &#123; stat, exists, readFile &#125; <span class="keyword">from</span> <span class="string">&#x27;fs&#x27;</span>;</span><br><span class="line"><span class="comment">// 上面代码的实质是从fs模块加载 3 个方法，其他方法不加载。这种加载称为“编译时加载”或者静态加载</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//匿名加载</span></span><br><span class="line"><span class="keyword">import</span> customName <span class="keyword">from</span> <span class="string">&#x27;./export-default&#x27;</span>;</span><br><span class="line"><span class="comment">// 上面的代码会加载导入文件中的默认输出 即 export default ,且可以随意为默认输出指定名称</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//兼容加载</span></span><br><span class="line"><span class="keyword">import</span> load, &#123; each, forEach &#125; <span class="keyword">from</span> <span class="string">&#x27;lodash&#x27;</span>;</span><br><span class="line"><span class="comment">// 如果想同时加载默认输出和其他接口,可以写成如上形式</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>export default 命令:为模块指定默认输出</p>
</blockquote>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;foo&#x27;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法一</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">m</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;1&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法二</span></span><br><span class="line"><span class="keyword">var</span> m = <span class="keyword">function</span>(<span class="params"></span>)&#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;2&#x27;</span>)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> &#123;m&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法三</span></span><br><span class="line"><span class="keyword">export</span> &#123;n <span class="keyword">as</span> m&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="浏览器的加载体系"><a href="#浏览器的加载体系" class="headerlink" title="浏览器的加载体系"></a>浏览器的加载体系</h2><p>浏览器脚本的默认语言是 JavaScript，默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<code>&lt;script&gt;</code>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。所以就有异步加载的需求</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// 异步加载</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;path/to/myModule.js&quot;</span> <span class="attr">defer</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;path/to/myModule.js&quot;</span> <span class="attr">async</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>当浏览器遇到标签存在 <code>defer</code> 或 <code>async</code> 属性，脚本就会异步加载（不会等它下载和执行，而是直接执行后面的脚本）。<code>defer</code> 是“渲染完再执行”，<code>async</code> 是“下载完就执行”。因此 <code>async</code> 不能保证加载的顺序</p>
<blockquote>
<p>ES6模块的加载</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// ES6 模块的加载属于异步执行</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">&quot;module&quot;</span> <span class="attr">src</span>=<span class="string">&quot;./foo.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>与君共勉</p>
  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#ECMAScript6-%E7%9A%84%E5%AE%9A%E4%B9%89"><span class="toc-text">ECMAScript6 的定义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A3%B0%E6%98%8E%E5%8F%98%E9%87%8F%E7%9A%84%E5%91%BD%E4%BB%A4"><span class="toc-text">声明变量的命令</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%98%E9%87%8F%E7%9A%84%E7%BB%93%E6%9E%84%E8%B5%8B%E5%80%BC"><span class="toc-text">变量的结构赋值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97"><span class="toc-text">数组的扩展运算</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97%E7%AC%A6-%E2%80%A6"><span class="toc-text">扩展运算符 …</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">数组的扩展</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95%E8%BF%90%E7%AE%97"><span class="toc-text">对象的扩展运算</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-text">对象的扩展</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#prototype"><span class="toc-text">prototype</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%8B%AC%E4%B8%80%E6%97%A0%E4%BA%8C%E7%9A%84Symbol"><span class="toc-text">独一无二的Symbol</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Symbol%E7%9A%84%E6%89%A9%E5%B1%95%E8%BF%90%E7%94%A8"><span class="toc-text">Symbol的扩展运用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Set%E5%92%8C-Map%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84"><span class="toc-text">Set和 Map数据结构</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Set-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84"><span class="toc-text">Set 数据结构</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Map-%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84"><span class="toc-text">Map 数据结构</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E7%9A%84%E9%81%8D%E5%8E%86%E5%BE%AA%E7%8E%AF"><span class="toc-text">数据结构的遍历循环</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E7%9B%B8%E5%85%B3Promise"><span class="toc-text">异步编程相关Promise</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Promise-%E7%9A%84%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86"><span class="toc-text">Promise 的数据处理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E7%9B%B8%E5%85%B3Generator"><span class="toc-text">异步编程相关Generator</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Generator-%E6%95%B0%E6%8D%AE%E6%93%8D%E4%BD%9C"><span class="toc-text">Generator 数据操作</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E7%9B%B8%E5%85%B3-async"><span class="toc-text">异步编程相关 async</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#async-%E7%9A%84%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86"><span class="toc-text">async 的数据处理</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Class-%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95"><span class="toc-text">Class 的基本语法</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%8D%E8%A2%AB%E7%BB%A7%E6%89%BF%E7%9A%84%E9%9D%99%E6%80%81%E6%96%B9%E6%B3%95"><span class="toc-text">不被继承的静态方法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E4%BD%93%E7%B3%BB%E7%9A%84%E5%8A%A0%E8%BD%BD"><span class="toc-text">模块体系的加载</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%BD%93%E7%B3%BB"><span class="toc-text">浏览器的加载体系</span></a></li></ol>
  </div>
</aside>

  
  
    <aside class="passage-copyright">
      <div>本文作者: 饿包子</div>
      
        <div>
          原文链接: 
          <a href="" target="_blank">https://lixianbin1.github.io/blog/2019/05/26/%E3%80%90%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E3%80%91ES6%E7%9A%84%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</a>
        </div>
      
      <div>
        版权声明: 本博客所有文章除特别声明外, 均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议. 转载请注明出处!
      </div>
    </aside>
  
  
    <div class="passage-tags">
     
      <a href="/blog/tags/ES6/"><i class="fa fa-tags"></i>ES6</a>
    
    </div>
  
</div>

    </main>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2019/06/02/JS%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%BB%8B%E7%BB%8D%EF%BC%88%E4%B8%80%EF%BC%89/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2019/05/08/Three-js%E7%9A%84%E5%AD%A6%E4%B9%A0%E8%BF%87%E7%A8%8B%EF%BC%88%E4%B8%80%EF%BC%89/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2019/06/02/JS%20%E7%9A%84%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%BB%8B%E7%BB%8D%EF%BC%88%E4%B8%80%EF%BC%89/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2019/05/08/Three-js%E7%9A%84%E5%AD%A6%E4%B9%A0%E8%BF%87%E7%A8%8B%EF%BC%88%E4%B8%80%EF%BC%89/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>